<template>
  <div>
    <i
      class="player-switch"
      :class="playerSwitchIconClass"
      @click="clickHandler"
    />
  </div>
</template>

<script>
  export default {
    name: 'TinyVisualUiPlayerSwitch',
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      value: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        curValue: false
      }
    },
    computed: {
      playerSwitchIconClass () {
        return `el-icon-video-${!this.curValue ? 'play' : 'pause'}`
      }
    },
    watch: {
      value: {
        handler (value) {
          this.curValue = value
        },
        immediate: true
      },
      curValue (val) {
        this.$emit('change', val)
      }
    },
    methods: {
      clickHandler () {
        this.curValue = !this.curValue
      }
    }
  }
</script>

<style>
</style>
